<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="listBox">
			<view class="listItem" v-for="(item,index) in content" :key="index" @click="$navto.navto('/packageB/post_info/post_info',{id:item.communityArticle.id})">
				<image :src="baseurl+'association/icon2.png'" class="itemIcon"></image>
				<text class="title">{{item.title}}</text>
				<image :src="baseurl+'association/followed.png'" class="follow" @click.stop="follow(0,item.article_id)"></image>
				<image :src="item.avatar" class="activityHead"></image>
				<view class="activityNameBox">
					<text class="activityName1 black">{{item.nickname}}</text>
					<image :src="ite.icon_url" v-for="(ite,ind) in item.medal_arr" :key="ind" class="userBadge"></image>
				</view>
				<view class="viewBox">
					<image :src="baseurl+'association/icon9.png'" class="eye"></image>
					<text class="viewNum black">阅读：{{item.communityArticle.read_num}}</text>
					<image :src="baseurl+'association/vote.png'" class="vote"></image>
					<text class="viewNum black">点赞：{{item.communityArticle.like}}</text>
					<image :src="baseurl+'association/msg.png'" class="msg"></image>
					<text class="viewNum black">回复：{{item.communityArticle.comment}}</text>
				</view>
				<text class="publishTime black">发布时间：{{item.communityArticle.create_time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '我的关注',
					bgColor: 'transparent',
					color: '#000',
				},
				content: '',
				page:1
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {},
		onReachBottom() {
			console.log("加载更多");
			this.page++;
			this.$request.get(`CommunityFollow/follow_list?page=${this.page}`).then(
				res => {
					this.content.push(...res.data.data);
				})
		},
		methods: {
			getData() {
				this.$request.get(`CommunityFollow/follow_list?page=${this.page}`).then(res => {
					console.log(res.data.data);
					this.content = res.data.data;
				})
			},
			// 取消关注
			follow(num,id) {
				uni.showModal({
					title: '提示',
					content: '是否取消关注',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$request.post(`community/follow`, {
								article_id: id,
								status: num
							}).then(res => {
								console.log(res);
								this.$u.toast(res.data.msg);
								this.getData();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
		computed: {},
	}
</script>

<style lang="scss" scoped>
	.activityHead {
		position: absolute;
		width: 37rpx;
		height: 37rpx;
		top: 69rpx;
		border-radius: 50%;
		left: 0;
	}

	.activityNameBox {
		position: absolute;
		max-width: 340rpx;
		font-size: 24rpx;
		font-weight: 500;
		top: 70rpx;
		left: 55rpx;
		color: #000;
		display: flex;

		.activityName1 {
			max-width: 300rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.userBadge {
		width: 32rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
	}

	.publishTime {
		position: absolute;
		max-width: 440rpx;
		font-size: 24rpx;
		font-weight: 500;
		left: 0;
		top: 200rpx;
		color: #292929;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.viewBox {
		position: absolute;
		height: 20rpx;
		display: flex;
		align-items: center;
		top: 145rpx;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
		}
	}

	.listBox {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		height: calc(100vh - 230rpx);
		margin-top: 230rpx;
	}

	.listItem {
		width: 676rpx;
		height: 285rpx;
		position: relative;
		margin-bottom: 50rpx;
		margin-left: 38rpx;
		border-bottom: 1rpx solid #bebfc0;

		.follow {
			position: absolute;
			top: 0;
			right: 0rpx;
			width: 36rpx;
			height: 33rpx;
		}

		.title {
			position: absolute;
			top: 0;
			left: 80rpx;
			width: 560rpx;
			font-size: 27rpx;
			font-weight: 700;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.itemIcon {
			width: 60rpx;
			height: 30rpx;
		}
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
		background: url('https://miantou.guguan.net/img/user/commonBg.jpg');
		background-size: 100% 100%;
	}

	/deep/ page {
		width: 100% !important;
		height: 100vh !important;
		padding-bottom: 0 !important;
	}
</style>